import React, { Component } from 'react';
import { connect } from 'dva';
import {
  Input,
  Button,
  Form,
  Icon,
  message
} from 'antd';
import Drawer from 'react-motion-drawer';
import PSelect from "../../../components/Pro/PSelect";
import './less/devices.less';
import * as api from "../../../services/api";


const FormItem = Form.Item;

@connect(state => ({ profile: state.profile }))
@Form.create()

export default class EditDevicesDrawer extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      open: this.props.visible,
      curNum: 0,
      comEquipId: 0,
      comEquipList: {
        equipNo: '',//设备编号
        equipName: '',//设备名称
        equipType: '',//设备类型
      },
    };
  }


  //表单提交
  handleEditDeviceSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      values.comEquipId = this.state.comEquipId;
      console.log(values);
      if (!err) {
        api.enterpriseEquipComEquipUpdateComEquip(values).then((data) => {
          message.success(data.msg);
          console.log('this', this);
          this.props.tableUpdate();
          this.setState({
            open: false,
          });
        }, (err1) => {
          message.error(err1);
        });
      }
    });
  };

  componentWillReceiveProps(nextProps) {
    this.setState({ open: nextProps.visible });
    if (nextProps.comEquipId !== this.state.comEquipId) {
      if (nextProps.comEquipId === 0 || nextProps.comEquipId === undefined) {
        return;
      }
      this.setState({
        comEquipId: nextProps.comEquipId,
        curNum: nextProps.curNum
      });
      this.renderDate(nextProps.comEquipId);
    }
  }

  renderDate = (pro) => {
    console.log('id的值', pro);
    api.enterpriseEquipComEquipGetComEquipById({ comEquipId: pro }).then((data) => {
      console.log('shuju', data.data);
      console.log("comEquipList", data.data);
      const { setFieldsValue } = this.props.form;
      setFieldsValue({
        equipNo: data.data.equipNo || '',
        equipName: data.data.equipName || '',
        equipType: data.data.equipType || '',
      });
      this.setState({
        comEquipList: {
          equipNo: data.data.equipNo || '',
          equipName: data.data.equipName || '',
          equipType: data.data.equipType || '',
        },
      });
    }, (err) => {
      console.log(err);
    });
  }

  hideDrawer = () => {
    this.setState({ open: false });
  };

  //校验设备编号
  checkNo = (rule, value, callback) => {
    if (value && (/[\u4e00-\u9fa5]+/).test(value)) {
      callback('设备编号格式不正确');
    } else {
      callback();
    }
  };

  render() {
    const formItemLayout = {
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 7
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 17
        },
        md: {
          span: 17
        }
      }
    };
    const { getFieldDecorator } = this.props.form;

    return (
      <Drawer
        overlayColor="rgba(0, 0, 0,0)"
        right
        open={this.state.open}
        noTouchClose
        width={600}
        zIndex={2}
        className="drawer-box"
        onChange={(open) => {
          this.props.onChange(open);
          this.setState({ open });
        }}
      >
        <div className="drawer">
          <div className="drawer-header">
            编辑设备
            </div>
          <div className="drawer-content">
            <Form onSubmit={this.handleEditDeviceSubmit}>
              <FormItem {...formItemLayout} label="选择设备类型: ">
                {getFieldDecorator('equipType', {
                  initialValue: this.state.comEquipList.equipType,
                  rules: [
                    {
                      required: true
                    }
                  ]
                })(
                  <PSelect style={{ width: 294 }} placeholder="请选择" type="equipType" onChange={this.pSelectChange}  />
                  )}
              </FormItem>
              <FormItem {...formItemLayout} label="输入设备编号：">
                {getFieldDecorator('equipNo', {
                  initialValue: this.state.comEquipList.equipNo,
                  rules: [
                    {
                      required: true
                    }, {
                      validator: this.checkNo
                    }
                  ]
                })(<Input style={{ width: 294 }} placeholder="请输入" maxLength="20" />)}
              </FormItem>
              <FormItem {...formItemLayout} label="输入设备名称">
                {getFieldDecorator('equipName', {
                  initialValue: this.state.comEquipList.equipName,
                  rules: [
                    {
                      required: true
                    }
                  ]
                })(<Input style={{ width: 294 }} placeholder="请输入" maxLength="10" />)}
              </FormItem>
              <FormItem {...formItemLayout} label="库存数量">
                {getFieldDecorator('D-storageNumber', {
                  rules: [
                    {
                      required: false
                    }
                  ]
                })(<span style={{ color: "#D9D9D9" }}><i style={{ color: "#666", fontStyle: 'normal' }}>{this.state.curNum}</i>&nbsp;&nbsp;<Icon type="exclamation-circle" />请通过出库入库操作调整库存数量</span>)}
              </FormItem>
            </Form>
          </div>
          <div className="drawer-footer">
            <Button onClick={this.hideDrawer}>取消</Button>
            <Button type="primary" htmlType="submit" onClick={this.handleEditDeviceSubmit}>确定</Button>
          </div>
        </div>
      </Drawer>
    );
  }
}
